<template>
  <div class="content-card">
    <div class="title">
      <a-icon type="tags" />
      <span>{{ "市级/县区上报目录数情况" }}</span>
    </div>
    <div class="body">
      <div class="label">
        <div
                class="btn"
                :class="{ 'btn-active': btnActive === 'left' }"
                @click="setBtnActive('left')"
        >
          {{ "市级" }}
        </div>
        <div
                class="btn"
                :class="{ 'btn-active': btnActive === 'right' }"
                @click="setBtnActive('right')"
        >
          {{ "县区" }}
        </div>
      </div>
      <div class="table">
        <uz-table :data-source="tableData" />
      </div>
    </div>
  </div>
</template>

<script>
    import UzTable from "@/views/directories/utils/uz-table";
    import API from "@/api/directories";
    export default {
        name: "i3-table",
        components: { UzTable },
        data() {
            return {
                btnActive: "left",
                tableData: [],
                tableDataSj:[],
                tableDataXj:[],
            };
        },
        methods: {
            setBtnActive(target) {
                this.btnActive = target;
                this.btnActive === "left"
                    ? (this.tableData = this.tableDataSj)
                    : (this.tableData = this.tableDataXj);
            },
            getData() {
                let handleV6 = (res) => {
                    this.tableDataSj = res.data.body.data;
                    this.setBtnActive(this.btnActive);
                };
                let handleV7 = (res) => {
                    this.tableDataXj = res.data.body.data;
                    this.setBtnActive(this.btnActive);
                };
                API.getBox1_v6().then(handleV6);
                API.getBox1_v7().then(handleV7);
            }
        },
        mounted() {
            this.getData();
        },
    }
</script>

<style lang="less" scoped>
  .content-card {
    height: 100%;
    .title {
      display: flex;
      align-items: center;
      padding: 10px 0;
      background: linear-gradient(to right, #dee9ff, #ffffff);
      i {
        color: #6989c6;
        margin: 0 15px;
        font-size: 18px;
      }
      span {
        font-size: 16px;
        font-weight: 500;
      }
    }
    .body {
      width: 100%;
      .label {
        border-bottom: 1px dashed #eee;
        height: 60px;
        display: flex;
        justify-content: center;
        align-items: center;
        .btn-active {
          background: #688ac6;
          color: #ffffff;
          font-weight: 500;
        }
        .btn {
          display: flex;
          align-items: center;
          justify-content: center;
          box-shadow: 0 0 2px #ccc;
          filter: drop-shadow(0 0 2px #ccc);
          height: 36px;
          width: 160px;
          font-size: 16px;
          &:nth-child(1) {
            border-top-left-radius: 20px;
            border-bottom-left-radius: 20px;
            margin-right: 10px;
          }
          &:nth-child(2) {
            border-top-right-radius: 20px;
            border-bottom-right-radius: 20px;
          }
        }
      }
      .table {
        font-size: 16px;
      }
    }
  }
</style>
